<template>
  <PublicPage :custoNav="true">
    <!-- 自定义头部--搜索框 -->
    <view slot="headNav">
      <SearchInput
          :hasBorder="false"
          size="md"
          placeholder="搜索商品关键词"
          styleBody="padding: 0 16px 0 4px"
          @searchFn="searchFn"
      />
    </view>
    <!-- 分类tabs -->
    <view class="ssp-tabs">
      <u-tabs
          :list="tabList"
          :current="tabCurrent"
          :height="56"
          :show-bar="false"
          :active-item-style="activeItemStyle"
          active-color="#FFFFFF"
          font-size="28"
          inactive-color="#323233"
          @change="_tabsChange"
      />
    </view>
    <!-- 分割线 -->
    <!-- 分割线 -->
    <!-- 分割线 -->
    <!-- 商品列表 -->
    <ScrollList
        v-if="goodsList.length"
        ref=scrollView
        minusHeight="48"
        @interrupt="_handleRefresh"
        @scrolltolower="_handleMore"
    >
      <template slot="content">
        <GoodsWaterfall
            ref="waterfallRef"
            v-model="goodsList"
        />
      </template>
    </ScrollList>
    <!-- 骨架图 -->
    <view v-if="loading" class="goods-skeleton-view">
      <goodsSkeleton />
    </view>
    <!-- 缺省状态 -->
    <DefaultPage
        v-else-if="isEmpty&&!goodsList.length"
        :minusHeight="48"
        :type="defaultType"
        :tips="defaultTxt"
    />
    <!-- 未登录-缺省页 -->
    <DefaultPage
        v-else-if="!isLogin"
        type="2"
        tips="当前没有关注的商品哦~"
        configText="了解速速团"
    />
  </PublicPage>
</template>

<script>
import PublicPage from '@/components/publicPage/index.vue'
import SearchInput from '@/components/searchInput/index.vue'
import ScrollList from '@/components/scrollList/index.vue'
import GoodsWaterfall from '@/components/goodsWaterfall/index.vue'
import DefaultPage from '@/components/defaultPage/index.vue'
import goodsSkeleton from '@/components/goodsWaterfall/goodsSkeleton'

import goodsApi from '@/api/goods.js'
export default {
  name: 'store',
  components: {
    PublicPage,
    SearchInput,
    ScrollList,
    GoodsWaterfall,
    DefaultPage,
    goodsSkeleton
  },
  data() {
    return {
      tabList: [], // 分类tabs列表
      tabCurrent: 0, // 激活分类下标
      goodsList: [], // 商品列表
      listMore: true, // 当前列表是否还有更多
      params: {
        currentPage: 1,
        pageSize: 10,
        goodsName: '',
        categoryId: null
      },
      defaultTxt: '你关注的人暂时没有发布商品',
      defaultType: 2,
      isEmpty: false, // 是否显示空状态--配合goodsList的长度使用，避免在页面一开始加载时先显示了空状态
      loading: false, // 骨架图
    }
  },
  computed: {
    // tabs中active样式
    activeItemStyle() {
      return {
        background: '#E44435',
        borderRadius: '44rpx'
      }
    }
  },
  // onLoad() {
  //   this.getList()
  // },
  onShow() {
    this.getTabs()
    if (this.getIsRefreshType() || !this.goodsList.length) {
      this.$refs.waterfallRef && this.$refs.waterfallRef.clear()
      this.params.currentPage = 1
      this.getList()
      this.setIsRefreshType(false)
    }
  },
  methods: {
    // 获取分类列表
    async getTabs() {
      if (this.isLogin) {
        const { data } = await goodsApi.getStoreCategory()
        const categories = data || []
        categories.unshift({ name: '全部', id: null })
        this.tabList = categories
      }
    },
    // 重置数据列表
    _onResetList() {
      this.loading = true
      this.isEmpty = false
      this.params.currentPage = 1
      this.listMore = true
      this.getList()
      this.$refs.waterfallRef && this.$refs.waterfallRef.clear()
    },
    // 分类tabs改变触发
    _tabsChange(index) {
      this.tabCurrent = index
      const item = this.tabList[index]
      this.params.categoryId = item.id
      this._onResetList()
    },
    // 获取商品列表
    getList() {
      if (this.isLogin) {
        goodsApi.getStoreList(this.params).then(res => {
          if (this.params.currentPage === 1) {
            this.loading = true
            this.goodsList = res.data.records
            if (!this.goodsList.length) this.isEmpty = true
            if (this.params.goodsName && !this.goodsList.length) {
              this.defaultType = 3
              this.defaultTxt = '暂时没有找到相关商品，换个关键词试试吧～'
            }
            if (this.loading) {
              setTimeout(() => {
                this.loading = false
              }, 250)
            }
          } else {
            this.goodsList = this.goodsList.concat(res.data.records)
          }
          // 无更多标识
          if ((this.params.currentPage * this.params.pageSize) !== this.goodsList.length) {
            this.listMore = false
          }
        }).catch(err => {
          if (this.loading) {
            setTimeout(() => {
              this.loading = false
            }, 500)
          }
          this.isEmpty = true
          this.$refs.scrollView && this.$refs.scrollView.loadFinish(3,0)
        })
      }
    },
    // 搜索
    searchFn(val) {
      this.params.goodsName = val
      this._onResetList()
    },
    // 下拉刷新
    _handleRefresh() {
      this._onResetList()
      setTimeout(() => {
        this.$refs.scrollView && this.$refs.scrollView.refreshFinish() // 刷新完成
      }, 500)
    },
    // 加载更多
    _handleMore() {
      ++this.params.currentPage
      this.getList()
      this.$refs.scrollView.loadFinish(this.listMore ? 0 : 3) // 加载完成，是否还有更多
    }
  }
}
</script>

<style lang="scss" scoped>
.ssp-tabs {
  padding: 18rpx 0 14rpx 16rpx;
  background-color: #ffffff;
  .goods-skeleton-view {
    position: relative;
  }
}
</style>
